import ChartBase from "./chart-base";
import { deepClone, mergeObject } from "@/utils";

export default class WordCloud extends ChartBase {
  constructor() {
    super();
  }

  // 基础描述
  _info = {
    name: "词云",
    type: "word-cloud", // 图表类型
    group: "wordCloud", // 图表分类
    component: "e-chart",
    icon: "word-cloud", // 图表展示ICON
  };

  // 总 配置项
  _defaultOption = {
    tooltip: {
      show: true,
      confine: true,
      extraCssText: "max-width:300px; white-space:pre-wrap",
    },
    series: [],
  };

  // 系列
  _defaultSeries = {
    type: "wordCloud",
    size: ["9%", "99%"],
    sizeRange: [10, 48], //最小文字——最大文字
    textRotation: [0, 45, 90, -45],
    rotationRange: [-45, 90], //旋转角度区间
    rotationStep: 90, //旋转角度间隔
    shape: "diamond",
    drawOutOfBound: false,
    gridSize: 10, //字符间距
    textPadding: 0,
    autoSize: {
      enable: true,
      minSize: 6,
    },
    textStyle: {
      color: function (item, index) {
        return (
          "rgb(" +
          [
            Math.round(Math.random() * 160 + 55),
            Math.round(Math.random() * 160 + 55),
            Math.round(Math.random() * 160 + 55),
          ].join(",") +
          ")"
        );
      },
      emphasis: {
        shadowBlur: 10,
        shadowColor: "#333",
      },
    },
    data: [],
  };

  // 数据结构描述
  _dataPoolConfig = [
    {
      label: "字段",
      key: "xField",
      type: ["string", "date", "number"],
      limit: 1,
    },
    {
      label: "值",
      key: "value",
      type: ["number"],
      limit: -1,
    },
  ];

  //样式配置描述信息
  _styleOptionConfig = [
    {
      label: "文字配置",
      bindKeys: "_group.font",
      controlType: "group", // 展示类型 / 标题直接展示
      controlValue: "", // 下拉默认选项 / 开关（是/否）/ 字体号
      controlProps: {},
      controlConfigs: {}, //  下拉选项
    },
    {
      label: "最大字体",
      bindKeys: "config.font.maxSize",
      controlType: "input-number",
      controlValue: 48,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "最小字体",
      bindKeys: "config.font.minSize",
      controlType: "input-number",
      controlValue: 10,
      controlProps: {},
      controlConfigs: {},
    },
  ];

  getOption({
    dataList = [],
    dataTotal = 0,
    dataPoolField,
    styleOptionConfig = [],
    themeColor = [],
    themeStyle = {},
  }) {
    let { option, mapSeries, config } =
      this._transformStyleOptionConfig(styleOptionConfig);
    let defaultOption = deepClone(this._defaultOption);
    let defaultSeries = deepClone(this._defaultSeries);

    //数据处理
    if (dataPoolField.xField.length && dataPoolField.value.length) {
      let name = dataPoolField.xField[0].fieldName;
      let value = dataPoolField.value[0].fieldName;
      defaultSeries.data = dataList.reduce((r, c) => {
        r.push({
          name: c[name],
          value: c[value],
        });
        return r;
      }, []);
    }

    defaultSeries.sizeRange = [config.font.minSize, config.font.maxSize];

    defaultSeries.textStyle.color = (item) => {
      return `${
        themeColor[item.dataIndex] ||
        "rgb(" +
          [
            Math.round(Math.random() * 160 + 55),
            Math.round(Math.random() * 160 + 55),
            Math.round(Math.random() * 160 + 55),
          ].join(",") +
          ")"
      }`;
    };

    defaultOption.series.push({
      ...defaultSeries,
    });
    return defaultOption;
  }

  getClickData(event) {
    const { name, seriesName, value } = event;

    return {
      label: name,
      value: value[seriesName],
    };
  }
}
